<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 200px;
            margin: 100px auto; 
        }
        input {
            float: left;   
            margin-left: 10px; 
            color: #ccc;
            outline: none;
        }
        .border {
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" value="邮箱/ID/手机号" class="ip1">
        <input type="text" value="密码" class="ip2">
    </div>
    <script>
        var text = document.querySelector('.ip1');
        var text2 = document.querySelector('.ip2');
        text.onclick = function() {
            this.value = '';
            this.style.color = '#333';
            this.className = 'input border'; 
        }
        text.onblur = function () {
            if( this.value ===''){
            this.value = '邮箱/ID/手机号';
            this.className = 'input';
            
            }
            this.style.color = '#999';
        }
        text2.onclick = function() {
            this.value = '';
            this.type = 'password';
            this.style.color = '#333';
            this.className = 'input border'; 
        }
        text2.onblur = function () {
            if( this.value ===''){
                this.type = 'text';
            this.value = '密码';
            this.className = 'input';
            
            }
            this.style.color = '#999';
        }
        
    </script>
</body>
</html>